var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
    
      autoplay:true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
})   

const lc = document.querySelector('.live > .box')

const city = document.querySelector(' .dangs > .dangsing')

const cities = document.querySelector(' .citys > #citiess ')
// const rigBox = document.querySelector('header > .rig')

//定位
getCity()
async function getCity(){
    const res = await $.ajax({
        url:'./js/json/citylist.json',
        dataType:'json'
    })
    res.hotCities.forEach(function (item, index) {    
    city.innerHTML += ` <div class="dangsing"> ${ item }</div>`
        index;
    });
}

//其他城市
getqtCity()
async function getqtCity(){
    const res = await $.ajax({
        url:'./js/json/allcitylisy.json',
        dataType:'json'
    })
    res.allCities.forEach(function (item, index) {    
        cities.innerHTML += ` <div class="cities" id="citiess"> ${item} </div>`
        
    });
}

//演唱会
getList()
async function getList(){

    const res = await $.ajax({
        url: './js/json/new.json',
        dataType:'json'
    })
    console.log(res);

    let str1 = `
    <div class="lef">
        <img src="./images/live.jpg" alt="" data-id="${res.data[0].id}">
        <div class="box-lef">
            <div class="title" data-id="${res.data[0].id}">2021 WAGF 音乐节 Gin《Passage》 吉他音乐会 </div>
            <div class="details" data-id="${res.data[0].id}">¥220<span>起</span></div>
        </div>
    </div>
    `

    str2 = ''
    
    res.data.slice(1).forEach(item =>{
        // str += `<div class='live'>${ item }</div>`

        //获取信息,渲染页面
    
     str2 += `<div class="rig">`
        for(let i = 0; i<Array.length; i++){
            if(Array.index == 0){
                str1 += `
                <div class="lef" data-id="${item.id}">
                    <img src="${item.verticalPic}" alt="" data-id="${item.id}">
                    <div class="box-lef">
                        <div class="title" data-id="${item.id}">${item.name} </div>
                        <div class="details" data-id="${item.id}">¥${item.formattedPriceStr}<span>起</span></div>
                    </div>
                </div> 
                `
            }
            for(let i = 0;i<Array.length;i++){
                
                if(Array.length === 1){ 

                    const array = res.data.slice(1,7)
                    array.forEach(item =>{
                        str2 += `
                        <div class="box-sing"> 
                            <img src="${item.verticalPic}" alt="" data-id="${item.id}">
            
                            <div class="info" data-id="${item.id}">
                                <div class="title" data-id="${item.id}">${item.name}</div>
                                <div class="venue" data-id="${item.id}">${item.venueName}</div>
                                <div class="showtime" data-id="${item.id}">${item.showTime}</div>
                                <div class="price" data-id="${item.id}">¥${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span data-id="${item.id}">起</span></div>
                            </div>
                        </div>       
                    `
                    })
            }
            }
    }  


    lc.innerHTML = str1 + str2


    })
}


const ListBox = document.querySelector('.live > .box')

ListBox.addEventListener('click',e => {
    e= e || window.event
    const target = e.target || e.srcElement
    if (target.tagName === 'IMG'){
        const id =target.dataset.id
        //存储在 sessionStorage
        window.localStorage.setItem('id',id)
        //跳转页面
        window.location.href = './detail.html'
    }
    if (target.tagName === 'DIV'){
        const id =target.dataset.id
        //存储在 localStorage
        window.localStorage.setItem('id',id)
        //跳转页面
        window.location.href = './detail.html'
    }
})

//获取头部搜索框事件
const search = document.querySelector('.cen > input')
const  box = document.querySelector('.cen > ol')

search.oninput = function(){
    const text = this.value

    const script = document.createElement('script')
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=' + text +'&req=2&csor=2&pwd=%E7%88%B1%E5%A5%87%E8%89%BA&cb=fn&_=1624513627828'
    document.body.appendChild(script)

    script.remove()
}
function fn(res){
    if(!res.g){
        //表示res 内没有 g 这个数据
        //让ol隐藏
        box.style.display = 'none'
        return
    }
    //表示 res 内 是一个数组 循环数组 让ol显示
    let Str = ''
    res.g.forEach(item =>{
        Str += `<li>${item.q}</li>`
    })

    box.innerHTML = Str

    box.style.display = 'block'
}